<template>
  <div class="w-full h-full flex flex-col">
    <div class="w-full flex flex-row items-center justify-between">
      <div class="cursor-pointer w-w1/5" @click="action_page_back">
        <i class="el-icon-d-arrow-left text-c3 text-f20 hover:text-cmain"
          ><span class="ml-w10 hover:text-cmain">{{
            s_staff.companyName
          }}</span></i
        >
      </div>
      <div class="w-w4/5 flex flex-row items-center justify-end">
        <el-input
          class="w-w1/3"
          placeholder="请输入姓名、手机号、工号、部门"
          clearable
          prefix-icon="el-icon-search"
          v-model="s_staff.str_key"
          @clear="action_list_data"
        >
        </el-input>
        <el-button
          type="primary"
          class="bg-cmain_hover ml-w10"
          @click="action_list_data"
          >搜索</el-button
        >
        <el-button
          type="primary"
          class="bg-cmain_hover ml-w10"
          icon="el-icon-plus"
          @click="dialog_add_staff = true"
          >添加员工</el-button
        >
        <el-button
          type="primary"
          class="bg-cmain_hover ml-w10"
          icon="el-icon-folder"
          @click="dialog_import_staff = true"
          >导入员工</el-button
        >
        <el-button
          type="primary"
          class="bg-cmain_hover ml-w10"
          icon="el-icon-download"
          @click="action_export_data"
          >导出员工</el-button
        >
        <el-button
          type="warning"
          style="background-color: #e6a23c"
          icon="el-icon-remove"
          @click="action_froze_batch"
          >批量冻结</el-button
        >
        <el-button
            type="success"
            style="background-color: #67c23a"
            icon="el-icon-remove"
            @click="action_unfroze_batch"
        >批量解冻</el-button
        >
        <el-button
          type="primary"
          class="bg-cmain_hover ml-w10"
          icon="el-icon-delete"
          @click="action_staff_bin"
          >回收站</el-button
        >
        <i
          class="el-icon-refresh text-f26 ml-w10 hover:text-cmain"
          @click="action_list_data"
        ></i>
      </div>
    </div>
    <div class="w-full h-full mt-w20">
      <el-table
        :data="s_staff.list_staff"
        stripe
        style="width: 100%"
        height="700px"
        ref="staffTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" min-width="10%">
        </el-table-column>
        <el-table-column prop="name" label="员工姓名" min-width="10%">
        </el-table-column>
        <el-table-column prop="city" label="分公司名称" min-width="10%">
        </el-table-column>
        <el-table-column prop="department" label="所属部门" min-width="10%">
        </el-table-column>
        <el-table-column prop="phone" label="员工电话" min-width="10%">
        </el-table-column>
        <el-table-column prop="job" label="员工工号" min-width="10%">
        </el-table-column>
        <el-table-column label="状态" min-width="6%">
          <template slot-scope="scope">
            <span :class="scope.row.status == 1 ? ' text-caux' : ' text-c9'">{{
              scope.row.status == 1 ? "正常" : "冻结"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="15%">
          <template slot-scope="scope">
            <el-button
              class="bg-caux"
              type="primary"
              size="mini"
              @click="action_edit_staff(scope.row)"
            >
              编辑</el-button
            >
            <el-button size="mini" @click="action_reset_pwd(scope.row)">
              重置密码</el-button
            >
            <el-button
              size="mini"
              type="warning"
              @click="action_froze(scope.row)"
              v-if="scope.row.status == 1"
              style="background-color: #e6a23c"
              >冻结
            </el-button>
            <el-button
              size="mini"
              type="info"
              @click="action_Unfroze(scope.row)"
              style="background-color: #909399"
              v-else
              >解冻</el-button
            >
            <el-button
              class="bg-cred1"
              type="danger"
              size="mini"
              @click="action_del(scope.row)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="w-full flex items-end justify-center" style="height: 7%">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="s_staff.m_page.total"
          :page-size="s_staff.m_page.limit"
          @current-change="action_page_change"
        >
        </el-pagination>
      </div>
    </div>
    <UiDialogAddStaff
      :is_showDialog="dialog_add_staff"
      @nydialog_closed="dialog_add_staff = false"
      @nydialog_submit="action_add_staff"
    >
    </UiDialogAddStaff>
    <UiDialogEditStaff
      :is_showDialog="dialog_edit_staff"
      :data="m_staff"
      @nydialog_closed="dialog_edit_staff = false"
      @nydialog_submit="action_update_staff"
    >
    </UiDialogEditStaff>
    <UiDialogImportStaff
      :company="s_staff.company"
      :is_showDialog="dialog_import_staff"
      @nydialog_closed="dialog_import_staff = false"
      @nydialog_submit="action_list_data"
    >
    </UiDialogImportStaff>
  </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>
</style>
